<template>
  <!-- 分类课程 -->
  <div class="classifyCourseBox">
    <x-header :left-options="{showBack: true,backText:'分类课程'}" class="headerBox"></x-header>
    <div v-for="(item,index) in classList" class="classifyBox">
      <div class="subject">{{item.title}}</div>
      <div class="gradeBox clearfix">
        <div v-for="(item2,index2) in item.gradeList" :key="index2" class="grade">{{item2}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
export default {
  components: {
    XHeader,
  },
  data() {
    return {
      classList: [
        {
          title: '语文',
          gradeList: ['小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级',]
        },
        {
          title: '数学',
          gradeList: ['小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级',]
        },
        {
          title: '英语',
          gradeList: ['小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级',]
        },
        {
          title: '化学',
          gradeList: ['小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级','小学一年级',]
        },
      ]
    }
  },
}
</script>
<style lang="less" scoped>
.classifyCourseBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  .classifyBox {
    padding: 0 20px;
    .subject {
      margin: 20px 20px;
      color: #4c4c4c;
      font-size: 36px;
    }
    .gradeBox {
      width: 100%;
      .grade {
        float: left;
        width: 28%;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background-color: #f4f4f4;
        box-sizing: border-box;
        margin: 10px 20px;
        font-size: 30px;
        // font-weight: bold;
      }
      .grade:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>